<template>
  <div class="menu-table-wrapper">
    <tree-table
      :origin="originData"
      id="menuCode"
      pid="pMenuCode"
      :columns="columns"
      :tree-props="['service', 'configurable', 'polyfill']"
      @on-checked="getChecked"
    />
  </div>
</template>

<script>
import { TreeTable } from "@/components/tables";

import i18n from "@/locale";
import menuData from "@/mock/menu";

export default {
  name: "MenuTable",
  components: {
    TreeTable,
  },
  data() {
    return {
      originData: [],
      columns: [
        {
          prop: "menuName",
          label: i18n.t("TABLES.UserManagement"),
        },
        {
          prop: "service",
          label: i18n.t("TABLES.CurrentServiceStatus"),
        },
        {
          prop: "configurable",
          label: i18n.t("TABLES.IsConfigurable"),
        },
        {
          prop: "polyfill",
          label: i18n.t("TABLES.isPolyfill"),
        },
        // {
        //   prop: "aaaa",
        //   label: "我是不存在的",
        // },
      ],
    };
  },
  mounted() {
    this.initMenuData();
  },
  methods: {
    initMenuData() {
      this.originData = [];
      this.originData = [...menuData];
    },
    getChecked() {
      // (value)
      // console.log(arguments[0]);
    },
  },
};
</script>

<style scoped lang="scss"></style>
